{% extends 'AdminBundle:base:index.html.twig' %}
    {% block title %}组{% endblock %}
    {% block description %}显示组{% endblock %}
    {% block plugin_styles %}
        <link rel="stylesheet" href="/admin/assets/css/daterangepicker.min.css"/>
    {% endblock %}
    {% block head %}{{ parent() }}{% endblock %}

    {% block breadcrumbs %}
        {% embed "AdminBundle:base:breadcrumbs.html.twig" %}
            {% block breadcrumb %}
                <li><a href="#">用户认证</a></li>
                <li class="active">组</li>
                <li><a href="{{ path('authgroup_new') }}">新建</a></li>

            {% endblock %}
        {% endembed %}
    {% endblock %}


    {% block content %}

        <div class="widget-box">
            <div class="widget-header widget-header-small">
                <h5 class="widget-title lighter">Search Form</h5>
            </div>

            <div class="widget-body">
                <div class="widget-main">

                    <form class="form-search">
                        <div class="row">
                            <div class="col-xs-3">
                                <div class="input-group">
																	<span class="input-group-addon">
																		<i class="fa fa-calendar bigger-110"></i>
																	</span>

                                    <input class="form-control" type="text" name="date_range"
                                           id="id-date-range-picker-1"/>
                                </div>
                            </div>
                            <div class="col-xs-3">
                                <div class="input-group">
                                    <span class="input-group-addon">
									    <i class="ace-icon fa fa-check"></i>
                                    </span>

                                    <input type="text" name="keyword" class="form-control search-query"
                                           placeholder="Type your query" value="{{ keyword }}"/>
                                </div>
                            </div>
                            <div class="col-xs-3">
                                <div class="input-group">
                                    <span class="input-group-btn">
									    <button type="submit" class="btn btn-purple btn-sm">
                                            <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                            Search
                                        </button>
									</span>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="space-2"></div>
        <div class="hr hr-18 dotted hr-double"></div>

        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                <th>组</th>
                <th>注释</th>
                <th>启用</th>
                <th>创建人</th>
                <th>
                    <i class="ace-icon fa fa-clock-o bigger-110 hidden-480"></i>
                    建立时间
                </th>
                <th>操作</th>

            </tr>
            </thead>

            <tbody>
            {% for authGroup in authGroups %}
                <tr>
                    <td><a href="{{ path('authgroup_show', { 'id': authGroup.id }) }}">{{ authGroup.name }}</a></td>
                    <td>{{ authGroup.note }}</td>
                    <td>
                        {% if authGroup.isEnabled %}<span class="label label-sm label-success">Yes</span>{% else %}<span
                                class="label label-sm label-warning">No</span>{% endif %}</td>
                    <td>{{ authGroup.createUser }}</td>
                    <td>{% if authGroup.ctime %}{{ authGroup.ctime|date('Y-m-d H:i:s') }}{% endif %}</td>
                    <td>
                        <div class="hidden-sm hidden-xs btn-group">
                            <a class="btn btn-xs btn-info"
                               href="{{ path('authgroup_edit', { 'id': authGroup.id }) }}" title="edit"><i
                                        class="ace-icon fa fa-pencil bigger-120"></i></a>

                            <a class="btn btn-xs btn-danger"
                               href="{{ path('authgroup_edit', { 'id': authGroup.id }) }}" title="delete"><i
                                        class="ace-icon fa fa-trash-o bigger-120"></i></a>

                            <a class="btn btn-xs btn-warning"
                               href="{{ path('authgroup_show', { 'id': authGroup.id }) }}" title="view">
                                <i class="ace-icon fa fa-flag bigger-120"></i>
                            </a>
                        </div>

                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endblock %}
    {% block plugin_scripts %}
        <script src="/admin/assets/js/moment.min.js"></script>
        <script src="/admin/assets/js/daterangepicker.min.js"></script>
    {% endblock %}

    {% block javascripts %}
        <script type="text/javascript">
            //to translate the daterange picker, please copy the "examples/daterange-fr.js" contents here before initialization
            $('input[name=date_range]').daterangepicker({
                'applyClass': 'btn-sm btn-success',
                'cancelClass': 'btn-sm btn-default',
                locale: {
                    applyLabel: 'Apply',
                    cancelLabel: 'Cancel',
                },
                "showDropdowns": true,
                "showWeekNumbers": true,
                "timePicker24Hour": true,
                "autoApply": true,
                "alwaysShowCalendars": true,
//                "startDate": "06/29/2017",
//                "endDate": "07/05/2017"
            }, function (start, end, label) {
                console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
            }).prev().on(ace.click_event, function () {
                $(this).next().focus();
            });

        </script>
    {% endblock %}
